import React, { useState, useEffect } from 'react';
import { Input, Button, } from 'antd';
import { PlusOutlined } from '@ant-design/icons';
import { useNavigate } from 'react-router-dom';
import * as service from '../../../../../api/salary.js'
import '../Account/Account.scss'
const { Search } = Input;

function Account(props: any) {
    var [salarylist, setSalarylist] = useState([])
    var navigate = useNavigate()
    useEffect(() => { //请求员工薪资档案列表
        service.salary_account({}).then((res: any) => {
            console.log(res);
            setSalarylist(res.data)
        })
    }, [])
    var onSearch = (value: any) => { //薪资核算表中搜索
        service.salary_search({ group: value }).then((res) => {
            console.log(res);
            setSalarylist(res.data)
        })
    }
    var tiao = () => { //跳转新增薪资核算表
        navigate('/index/moneys/salary/addaccount')
    }
    var delMetting = async (id: any) => { //删除单个薪资核算
        var res = await service.delete_account({ id })
        service.salary_account({}).then((res: any) => {
            console.log(res);
            setSalarylist(res.data)
        })
    }
    return (
        <div className='account'>
            <div className='account-one'>
                <div className='account-title-left'></div>
                <h4 className='account-title'>薪资核算表</h4>
            </div>
            <div className='account-two'>
                <Search placeholder="请输入关键字" onSearch={(value) => { onSearch(value) }} style={{ width: 320 }} />
                <Button type="primary" style={{ height: 40 }} onClick={() => { tiao() }}><PlusOutlined />新增薪资核算表</Button>
            </div>
            <div className='account-three'>
                {
                    salarylist.map((item: any, index) => {
                        return (
                            <div className='accountree-bottom'>
                                <div className='accountree-first'>
                                    <div className='first-box'>
                                        <h4>研发部1月份薪资核算表</h4><b>核算完成</b>
                                    </div>
                                    <p>薪资组:{item.group}</p>
                                    <p>算薪周期:{item.time}</p>
                                </div>
                                <div className='div-border'></div>
                                <div className='accountree-second'>
                                    <h4>薪资核算</h4>
                                    <div>
                                        <strong>核算总人数 <i>{item.num}</i></strong>
                                        <strong>预扣总个税 <i>{item.all_tax}.00元</i></strong>
                                        <strong>实发总金额 <i>{item.all_salary}.00元</i></strong>
                                    </div>
                                </div>
                                <div className='div-border'></div>
                                <div className='accountree-third'>
                                    <span>薪资组设置</span><span onClick={()=>{delMetting(item.id)}}>终止核算</span>
                                </div>
                            </div>
                        )
                    })
                }
            </div>
        </div>
    );
}

export default Account;